<template>
	<view class="container">
		<uni-popup ref="popup" @change="changePopup">
			<view class="popup-box">
				<img class="result-img" :src="resultImgPath" />
				<view class="close-btn" @click="closePopup"
					><img src="./../../../static/common/close.png" />
				</view>
				<view class="content-title"> 找相似（{{ list.length || 0 }}）</view>
				<view class="goods-detail">
					<f-common-singleGoods-card2 :data="list" @getCurrentItem="getCurrentItem" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref, toRaw, watch, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import showIndexApi from '../../../sheep/api/showIndex.js';
	import sheep from '@/sheep';
	import _ from 'lodash';

	const props = defineProps({});
	const emit = defineEmits();
	const popup = ref(null);
	const resultImg = ref('');
	const resultImgPath = ref('');
	const openDialog = (val) => {
		uni.hideTabBar();
		popup.value.open('bottom');
		resultImg.value = val.imageSrc;
		resultImgPath.value = val.imagePath;
		list.value = val.resInfoList;
	};
	const closePopup = () => {
		popup.value.close();
	};
	// mock数据
	const mockData = [];
	const list = ref([]);
	const getCurrentItem = (item) => {
		sheep.$router.go('/pages/index/goodsDetail', { id: item.id });
	};

	const changePopup = (e) => {
		if (!e.show) {
			uni.showTabBar();
		} else {
		}
	};
	onLoad(() => {});
	defineExpose({
		openDialog,
	});
</script>

<style scoped lang="scss">
	.container {
		.popup-box {
			height: calc(100vh - 400rpx);
			padding-top: 32rpx;
			background: #eef0f2;
			border-radius: 16rpx 16rpx 0px 0px;
			.result-img {
				width: 240rpx;
				height: 240rpx;
				position: fixed;
				top: -130rpx;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			.close-btn {
				position: fixed;
				top: -5%;
				left: 8%;
				transform: translate(-50%, -50%);
				img {
					width: 48rpx;
					height: 48rpx;
				}
			}
			.content-title {
				height: 60rpx;
				padding: 0 34rpx;
			}
			.goods-detail {
				height: calc(100vh - 500rpx);
				overflow-y: scroll;
				padding: 0 32rpx;
			}
		}
	}
</style>
